<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .tb img {
            width: 100px;
            height: 100px;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="tb">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="" />
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in products">
                    <td>
                        <input type="checkbox" name="" id="" />
                    </td>
                    <td>
                        <img v-bind:src="item.imgSrc" alt="" />
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.productName }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="handleChange(item, 'decrement')">-</button>
                        {{ item.count }}
                        <button v-bind:disabled="item.count === 5" @click="handleChange(item, 'increment')">+</button>
                    </td>
                    <td>
                        <button @click="handleDelete(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>


    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            data() {
                return {
                    products: [
                        {
                            id: 1,
                            code: 1,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg",
                            productName: "坤坤的背带裤",
                            price: 9.9,
                            count: 1
                        },
                        {
                            id: 2,
                            code: 2,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_2.jpeg",
                            productName: "品如的衣服",
                            price: 19.9,
                            count: 1
                        },
                        {
                            id: 3,
                            code: 3,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_3.jpeg",
                            productName: "秀儿的秋裤",
                            price: -9.9,
                            count: 1
                        },
                    ]
                }
            },

            methods: {
                handleDelete(id) {
                    console.log('handleDelete', id)

                    // 1. 根据 id 找到这条数据在 products 中的下标
                    const index = this.products.findIndex((item) => item.id === id)
                    console.log('index', index)

                    // 2. 使用 splice 方法来修改数组
                    this.products.splice(index, 1)
                },


                handleChange(item, type) {
                    console.log('item', item.productName)
                    if (type === 'increment') {
                        // ++
                        item.count++
                    } else if (type === 'decrement') {
                        // --
                        if (item.count <= 1) {
                            // 如果当前为 1, 减少则直接删除这条数据
                            this.handleDelete(item.id)
                            return
                        }
                        item.count--
                    } else {
                        console.error('操作有误')
                    }
                }
            }
        }).mount("#app");
    </script>
</body>

</html>